<script setup>
import { ref } from 'vue'
let products = ref([])
products.value = [
  {
    name: 'DJJ石英石01',
    price: 999,
    image: 'https://img1.baidu.com/it/u=4086795646,3761285691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067'
  },
  {
    name: 'DJJ石英石02',
    price: 399,
    image: 'http://img2.baidu.com/it/u=794876680,1261292119&fm=253&app=138&f=JPEG?w=800&h=1067'
  }
  ,
  {
    name: 'DJJ石英石03',
    price: 499,
    image: 'https://img1.baidu.com/it/u=2496223320,300449658&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1000'
  }
  ,
  {
    name: 'DJJ石英石04',
    price: 599,
    image: 'https://img1.baidu.com/it/u=4122818036,4089007308&fm=253&fmt=auto?w=500&h=666'
  }
  ,
  {
    name: 'DJJ石英石05',
    price: 699,
    image: 'https://img0.baidu.com/it/u=2149563421,2257614413&fm=253&fmt=auto&app=120&f=JPEG?w=1164&h=800'
  }
  ,
  {
    name: 'DJJ石英石06',
    price: 799,
    image: 'https://img2.baidu.com/it/u=1049778788,3980478805&fm=253&fmt=auto&app=138&f=JPEG?w=953&h=500'
  }
  ,
  {
    name: 'DJJ石英石07',
    price: 899,
    image: 'https://img0.baidu.com/it/u=412301330,2528211319&fm=253&fmt=auto?w=1156&h=800'
  }
  ,
  {
    name: 'DJJ石英石08',
    price: 909,
    image: 'https://img0.baidu.com/it/u=1333739932,332324308&fm=253&fmt=auto&app=138&f=JPEG?w=608&h=380'
  }
  ,
  {
    name: 'DJJ石英石09',
    price: 990,
    image: 'https://img0.baidu.com/it/u=199042036,208891522&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  }
  ,
  {
    name: 'DJJ石英石10',
    price: 1000,
    image: 'https://img2.baidu.com/it/u=2440991054,3760940245&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=456'
  }
]

</script>

<template>
  <div class="container">
  <el-row :gutter="20">
  <el-col :span="7" v-for="(product, index) in products" :key="index" style="margin: 5px;">
    <el-card>
      <img :src="product.image" class="image" width="200" height="200">
      <div style="padding: 20px;">
        <span>{{ product.name }}</span>
        <div class="bottom">
          <span>价格: ¥{{ product.price }}</span>
        </div>
        <el-button type="text" class="button">查看详情</el-button>
      </div>
    </el-card>
  </el-col>
</el-row>
  </div>
</template>

<style scoped>

</style>
